import { useTranslations } from 'next-intl';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import {
  Users,
  TrendingUp,
  DollarSign,
  Activity,
  ArrowUpRight,
  ArrowDownRight,
  MoreHorizontal,
  Bell,
  Calendar,
  FileText,
  Settings,
} from 'lucide-react';

export default function DashboardPage() {
  const t = useTranslations('common');
  const dashboard = useTranslations('dashboard');

  const stats = [
    {
      title: '总用户数',
      value: '12,345',
      change: '+12.5%',
      trend: 'up',
      icon: Users,
      color: 'text-blue-600',
    },
    {
      title: '月收入',
      value: '¥45,678',
      change: '+8.2%',
      trend: 'up',
      icon: DollarSign,
      color: 'text-green-600',
    },
    {
      title: '活跃用户',
      value: '8,765',
      change: '-2.4%',
      trend: 'down',
      icon: Activity,
      color: 'text-orange-600',
    },
    {
      title: '转化率',
      value: '23.4%',
      change: '+5.7%',
      trend: 'up',
      icon: TrendingUp,
      color: 'text-purple-600',
    },
  ];

  const recentActivities = [
    {
      id: 1,
      user: '张三',
      action: '创建了新订单',
      time: '2分钟前',
      type: 'order',
    },
    {
      id: 2,
      user: '李四',
      action: '更新了用户资料',
      time: '5分钟前',
      type: 'profile',
    },
    {
      id: 3,
      user: '王五',
      action: '发布了新产品',
      time: '10分钟前',
      type: 'product',
    },
    {
      id: 4,
      user: '赵六',
      action: '完成了项目审核',
      time: '15分钟前',
      type: 'review',
    },
    {
      id: 5,
      user: '孙七',
      action: '生成了分析报告',
      time: '20分钟前',
      type: 'report',
    },
  ];

  const quickActions = [
    { title: '新建项目', icon: FileText, color: 'bg-blue-500' },
    { title: '用户管理', icon: Users, color: 'bg-green-500' },
    { title: '系统设置', icon: Settings, color: 'bg-purple-500' },
    { title: '查看报告', icon: TrendingUp, color: 'bg-orange-500' },
  ];

  return (
    <div className="space-y-6 p-6">
      {/* Page Header */}
      <div className="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
        <div>
          <h1 className="text-3xl font-bold">{dashboard('title')}</h1>
          <p className="text-muted-foreground mt-1">
            {t('welcome')}回来，这是您的企业数据概览
          </p>
        </div>
        <div className="flex gap-2">
          <Button variant="outline" size="sm">
            <Calendar className="mr-2 h-4 w-4" />
            日期范围
          </Button>
          <Button variant="outline" size="sm">
            <Bell className="mr-2 h-4 w-4" />
            通知
          </Button>
        </div>
      </div>

      {/* Stats Cards */}
      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
        {stats.map((stat, index) => {
          const Icon = stat.icon;
          return (
            <Card key={index} className="transition-shadow hover:shadow-lg">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">
                  {stat.title}
                </CardTitle>
                <Icon className={`h-4 w-4 ${stat.color}`} />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{stat.value}</div>
                <div className="text-muted-foreground mt-1 flex items-center text-xs">
                  {stat.trend === 'up' ? (
                    <ArrowUpRight className="mr-1 h-3 w-3 text-green-500" />
                  ) : (
                    <ArrowDownRight className="mr-1 h-3 w-3 text-red-500" />
                  )}
                  <span
                    className={
                      stat.trend === 'up' ? 'text-green-500' : 'text-red-500'
                    }
                  >
                    {stat.change}
                  </span>
                  <span className="ml-1">较上月</span>
                </div>
              </CardContent>
            </Card>
          );
        })}
      </div>

      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
        {/* Chart Area */}
        <Card className="lg:col-span-2">
          <CardHeader>
            <CardTitle>{dashboard('analytics')}</CardTitle>
            <CardDescription>过去30天的数据趋势分析</CardDescription>
          </CardHeader>
          <CardContent>
            {/* Simulated Chart */}
            <div className="from-primary/5 to-primary/10 flex h-[300px] items-center justify-center rounded-lg bg-gradient-to-br">
              <div className="text-center">
                <TrendingUp className="text-primary mx-auto mb-4 h-12 w-12" />
                <p className="text-lg font-medium">数据可视化图表</p>
                <p className="text-muted-foreground text-sm">
                  这里可以集成 Chart.js 或 Recharts 等图表库
                </p>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Recent Activities */}
        <Card>
          <CardHeader>
            <CardTitle>最近活动</CardTitle>
            <CardDescription>实时系统活动记录</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {recentActivities.map(activity => (
                <div key={activity.id} className="flex items-start space-x-3">
                  <div className="bg-primary mt-2 h-2 w-2 flex-shrink-0 rounded-full" />
                  <div className="min-w-0 flex-1">
                    <p className="text-sm font-medium">{activity.user}</p>
                    <p className="text-muted-foreground text-xs">
                      {activity.action}
                    </p>
                    <p className="text-muted-foreground text-xs">
                      {activity.time}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Quick Actions */}
      <Card>
        <CardHeader>
          <CardTitle>快速操作</CardTitle>
          <CardDescription>常用功能快捷入口</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
            {quickActions.map((action, index) => {
              const Icon = action.icon;
              return (
                <Button
                  key={index}
                  variant="outline"
                  className="flex h-24 flex-col space-y-2 transition-shadow hover:shadow-md"
                >
                  <div
                    className={`h-8 w-8 rounded-lg ${action.color} flex items-center justify-center`}
                  >
                    <Icon className="h-4 w-4 text-white" />
                  </div>
                  <span className="text-sm">{action.title}</span>
                </Button>
              );
            })}
          </div>
        </CardContent>
      </Card>

      {/* Additional Info Cards */}
      <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-lg">系统状态</CardTitle>
            <MoreHorizontal className="text-muted-foreground h-4 w-4" />
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              <div className="flex items-center justify-between">
                <span className="text-sm">服务器状态</span>
                <span className="text-sm font-medium text-green-600">正常</span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-sm">数据库连接</span>
                <span className="text-sm font-medium text-green-600">稳定</span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-sm">API响应时间</span>
                <span className="text-sm font-medium text-yellow-600">
                  125ms
                </span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-sm">系统负载</span>
                <span className="text-sm font-medium text-green-600">轻度</span>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-lg">待办事项</CardTitle>
            <MoreHorizontal className="text-muted-foreground h-4 w-4" />
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              <div className="flex items-center space-x-3">
                <input type="checkbox" className="rounded" />
                <span className="text-sm">审核用户申请</span>
              </div>
              <div className="flex items-center space-x-3">
                <input type="checkbox" className="rounded" defaultChecked />
                <span className="text-muted-foreground text-sm line-through">
                  更新系统文档
                </span>
              </div>
              <div className="flex items-center space-x-3">
                <input type="checkbox" className="rounded" />
                <span className="text-sm">准备月度报告</span>
              </div>
              <div className="flex items-center space-x-3">
                <input type="checkbox" className="rounded" />
                <span className="text-sm">优化数据库性能</span>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}
